<!DOCTYPE html>
<html>

<head>
    <title>3D柱状图</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="main" style="width: 100%;height:800px;"></div>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/echarts.min.js"></script>
<!-- <script src="assets/js/echarts-gl.min.js"></script> -->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    console.log(echarts, 'echarts>>>');
    console.log(echarts.graphic.registerShape);

    // custom
    var MyCube = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
            width: 48,
            zWidth: 8,
            zHeight: 4,
        },
        buildPath: function (ctx, shape) {
            
            // console.log(shape);
            const api = shape.api;
            const xAxisPoint = api.coord([shape.xValue, 0]);
            const p0 = [shape.x, shape.y];
            const p1 = [shape.x - 24, shape.y];
            const p4 = [shape.x + 24, shape.y];
            const p6 = [shape.x + 24 + 8, shape.y - 4];
            const p7 = [shape.x - 24 + 8, shape.y - 4];
            const p2 = [xAxisPoint[0] - 24, xAxisPoint[1]];
            const p3 = [xAxisPoint[0] + 24, xAxisPoint[1]];
            const p5 = [xAxisPoint[0] + 24 + 8, xAxisPoint[1] - 4];
            ctx.moveTo(p0[0], p0[1]); //0        
            ctx.lineTo(p1[0], p1[1]); //1        
            ctx.lineTo(p2[0], p2[1]); //2        
            ctx.lineTo(p3[0], p3[1]); //3        
            ctx.lineTo(p4[0], p4[1]); //4        
            ctx.lineTo(p0[0], p0[1]); //0        
            ctx.moveTo(p4[0], p4[1]); //4        
            ctx.lineTo(p3[0], p3[1]); //3        
            ctx.lineTo(p5[0], p5[1]); //5        
            ctx.lineTo(p6[0], p6[1]); //6        
            ctx.lineTo(p4[0], p4[1]); //4        
            ctx.moveTo(p4[0], p4[1]); //4        
            ctx.lineTo(p6[0], p6[1]); //6        
            ctx.lineTo(p7[0], p7[1]); //7        
            ctx.lineTo(p1[0], p1[1]); //1        
            ctx.lineTo(p4[0], p4[1]); //4        
            ctx.closePath();
        }
    });
    echarts.graphic.registerShape('myCubeShape', MyCube);
    var option = {
        grid: {
            height: 300
        },
        xAxis: {
            data: ['one', 'two']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            type: 'custom',
            renderItem: function (params, api) {
                console.log(api,'>>');
                let location = api.coord([api.value(0), api.value(1)]);
                return {
                    type: 'myCubeShape',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]

                    },
                    style: {
                        fill: '#5A6'
                    }
                };
            },
            data: [20, 60]
        }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</html>